<template>
  <!-- 日志登录 -->
  <div class="aui-card--fill scroll-box card-box">
    <div class="chart">
      <div class="chart-left">
        <div class="left-top">
          <div style="display: flex;align-items: center;">
            <img src="~@/assets/img/userNum.png"
                 width="98px"
                 height="98px"
                 alt="">
            <div class="online">
              <div style="color: #999; font-size: 20px;">Online</div>
              <div style="color: #333; font-size: 24px;">当前在线人数</div>
            </div>
          </div>
          <div style="font-size: 20px;color: #333;"><span style="font-size: 36px;color: #2AB07A;">{{ online }}</span>人</div>
        </div>
        <div class="left-bottom">
          <span class="date">
            <el-date-picker v-model="date1"
                            type="date"
                            placeholder="选择日期"
                            @change="dayChange">
            </el-date-picker>
          </span>
          <div class="chart-box">
            <echart :data='informationData'
                    :heightNum="320" />
          </div>
        </div>
      </div>
      <div class="chart-right">
        <span class="date">
          <el-date-picker v-model="date2"
                          type="date"
                          placeholder="选择日期"
                          @change="dayChange1">
          </el-date-picker>
        </span>
        <div class="line-chart">
          <echart :data='visitorChartData'
                  :heightNum='450' />
        </div>
      </div>
    </div>
    <div class="mod-sys__log-login pane-shell">
      <el-form :inline="true"
               @submit.native.prevent
               :model="dataForm"
               :rules="dataRule"
               ref="dataForm"
               @keyup.enter.native="search">
        <el-form-item prop="AL_creatorName">
          <el-input v-model.trim="dataForm.AL_creatorName"
                    :placeholder="$t('logLogin.creatorName')"
                    clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-select filterable
                     v-model.trim="dataForm.status"
                     :placeholder="$t('logLogin.status')"
                     clearable>
            <el-option :label="$t('logLogin.status0')"
                       :value="0"></el-option>
            <el-option :label="$t('logLogin.status1')"
                       :value="1"></el-option>
            <el-option :label="$t('logLogin.status2')"
                       :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model.trim="date"
                          type="datetimerange"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <!-- v-if="$hasPermission('system:sysLogLogin:page')" -->
          <el-button type="primary"
                     @click="search()">{{ $t('query') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     plain
                     v-if="$hasPermission('system:sysLogLogin:export')"
                     @click="exportHandle()">{{ $t('export') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading"
                :data="dataList"
                border
                @sort-change="dataListSortChangeHandle"
                style="width: 100%;">
        <el-table-column prop="creatorName"
                         :label="$t('logLogin.creatorName')"
                         header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="operation"
                         :label="$t('logLogin.operation')"
                         header-align="center"
                         align="center">
          <template slot-scope="scope">
            {{ scope.row.operation === 0 ? $t('logLogin.operation0') : $t('logLogin.operation1') }}
          </template>
        </el-table-column>
        <el-table-column prop="status"
                         :label="$t('logLogin.status')"
                         sortable="custom"
                         header-align="center"
                         align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0"
                    size="small"
                    type="danger">{{ $t('logLogin.status0') }}</el-tag>
            <el-tag v-else-if="scope.row.status === 1"
                    size="small"
                    type="success">{{ $t('logLogin.status1') }}</el-tag>
            <el-tag v-else
                    size="small"
                    type="warning">{{ $t('logLogin.status2') }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ip"
                         label="用户ip"
                         header-align="center"
                         align="center"
                         width="150"></el-table-column>
        <el-table-column prop="userAgent"
                         :label="$t('logLogin.userAgent')"
                         header-align="center"
                         align="center"
                         width="150"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="createDate"
                         :label="$t('logLogin.createDate')"
                         sortable="custom"
                         header-align="center"
                         align="center"
                         width="180"></el-table-column>
      </el-table>
      <el-pagination :current-page="page"
                     :page-sizes="[10, 20, 50, 100]"
                     :total="total"
                     layout="total, sizes, prev, pager, next"
                     @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import { dateFormat } from '@/utils'
import echart from '@/components/echarts'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/system/sysLogLogin/page',
        getDataListIsPage: true,
        exportURL: '/system/sysLogLogin/export'
      },
      date: '',
      date11: '',
      dataForm: {
        creatorName: '',
        status: ''
      },
      online: '',
      date1: '',
      date2: '',
      informationData: {
        data: {
          columns: ['时间', '数量'],
          rows: [
            { '时间': '9:00-10:00', '数量': 69 },
            { '时间': '10:00-11:00', '数量': 85 },
            { '时间': '11:00-12:00', '数量': 54 },
            { '时间': '14:00-15:00', '数量': 69 },
            { '时间': '15:00-16:00', '数量': 85 }
          ]
        },
        chartSettings: {
          type: 'bar'
        },
        extend: {
          legend: {
            top: '0',
            right: '10'
          },
          grid: {
            top: '20',
            right: '20'
          },
          tooltip: {
            show: true
          },
          color: '#2584E2',
          xAxis: {
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLabel: {
              show: true,
              color: '#666',
              fontSize: 14
            }
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisLabel: {
              color: '#666',
              fontSize: 14
            }
          },
          series: {
            label: {
              show: true,
              position: 'right',
              color: '#666'
            },
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#0D6EE0' // 0% 处的颜色
              }, {
                offset: 1, color: '#4897F4' // 100% 处的颜色
              }]
            },
            barWidth: '40%',
            showBackground: true
          }
        }
      },
      visitorChartData: {
        data: {
          columns: ['时间', '数量'],
          rows: [
            { '时间': '00:00', '数量': 24 },
            { '时间': '03:00', '数量': 42 },
            { '时间': '06:00', '数量': 14 },
            { '时间': '09:00', '数量': 27 },
            { '时间': '12:00', '数量': 24 },
            { '时间': '15:00', '数量': 52 },
            { '时间': '18:00', '数量': 24 },
            { '时间': '21:00', '数量': 42 },
            { '时间': '24:00', '数量': 14 }
          ]
        },
        chartSettings: {
          type: 'line',
          area: true
        },
        colors: [{
          type: 'linear',
          x: 0, // 左上角x
          y: 0, // 左上角y
          x2: 0, // 右下角x
          y2: 1, // 右下角y
          colorStops: [{
            offset: 0, color: 'rgba(69,212,200,1)' // 0% 处的颜色
          }, {
            offset: 1, color: 'rgba(69,212,200,0.1)' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }],
        extend: {
          // grid: {
          //   top: 40,
          //   bottom: 20,
          //   left: 0,
          //   right: 0
          // },
          title: {
            // title为标题部分，有一级标题text，二级标题subtext。这里我们使用二级标题，再修改一下这个二级标题的位置即可出现我们想要的效果了，当然样式也可以通过title.subtextStyle去配置
            subtext: '单位（人）',
            // left: 24, // 距离左边位置
            // top: 16, // 距离上面位置
            subtextStyle: { // 设置二级标题的样式
              color: '#666',
              fontSize: 14
            }
          },
          yAxis: function () {
            return [{
              axisLabel: {
                color: '#666',
                fontSize: 14
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed'
                }
              }
            }]
          },
          xAxis: {
            axisLabel: {
              color: '#666',
              fontSize: 14
            }
          },
          legend: {
            // orient: 'vertical',
            x: 'right', // 可设定图例在左、右、居中
            y: 'top', // 可设定图例在上、下、居中
            itemHeight: 4,
            data: [{ name: '数量', icon: 'rect' }],
            textStyle: {// 图例文字的样式
              color: '#666',
              fontSize: 14
            }
          },
          series: {
            name: '数量',
            smooth: false,
            symbol: 'emptyCircle',
            symbolSize: 6
            // symbol: 'none'
          }
        }
      }
    }
  },
  computed: {
    dataRule () {
      return {
        AL_creatorName: [
          { required: false, message: this.$t('validate.required'), trigger: 'change' },
          { min: 0, max: 50, message: '长度在 1 到 50 个字符', trigger: 'change' }
        ]
      }
    }
  },
  components: {
    echart
  },
  mounted () {
    const date = dateFormat('YYYY-mm-dd', new Date())
    this.date11 = date
    this.getLinechart()
    this.getTop5()
    this.getOnline()
  },
  methods: {
    // 查询
    search () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          if (this.date !== null) {
            this.dataForm.startTime = this.date[0]
            this.dataForm.endTime = this.date[1]
          } else {
            this.dataForm.startTime = ''
            this.dataForm.endTime = ''
          }
          this.getPageInit()
        }
      })
    },
    getTop5 () {
      this.$http.get(`/system/sysLogLogin/hourLoginCount?date=${this.date11}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        let arr = []
        res.data.map((ress) => {
          arr.push({ '时间': ress.date, '数量': ress.count })
        })
        this.informationData.data.rows = arr
      })
    },
    dayChange (val) {
      var date = dateFormat('YYYY-mm-dd', val)
      this.$http.get(`/system/sysLogLogin/hourLoginCount?date=${date}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        let arr = []
        res.data.map((ress) => {
          arr.push({ '时间': ress.date, '数量': ress.count })
        })
        this.informationData.data.rows = arr
      })
    },
    // 获取折线图数据
    getLinechart () {
      this.$http.get(`/system/sysLogLogin/hourCount?date=${this.date11}`).then(({ data: res }) => {
        if ((res.code !== 0)) {
          return
        }
        let arr = []
        res.data.map((ress) => {
          arr.push({ '时间': ress.date, '数量': ress.count })
        })
        this.visitorChartData.data.rows = arr
      })
    },
    dayChange1 (val) {
      var date = dateFormat('YYYY-mm-dd', val)
      this.$http.get(`/system/sysLogLogin/hourCount?date=${date}`).then(({ data: res }) => {
        if ((res.code !== 0)) {
          return
        }
        let arr = []
        res.data.map((ress) => {
          arr.push({ '时间': ress.date, '数量': ress.count })
        })
        this.visitorChartData.data.rows = arr
      })
    },
    // 当前在线人数
    getOnline () {
      this.$http.get('system/sysLogLogin/onlineUserCount').then(({ data: res }) => {
        if ((res.code !== 0)) {
          return
        }
        this.online = res.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.chart {
  height: 480px;
  margin-bottom: 10px;
  display: flex;

  .chart-left {
    width: 600px;
    height: 100%;
    margin-right: 10px;

    .left-top {
      width: 100%;
      height: 120px;
      background: #fff;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 21px;

      .online {
        display: flex;
        flex-direction: column;
        height: 60px;
        justify-content: space-between;
        margin-left: 11px;
      }
    }

    .left-bottom {
      width: 100%;
      height: 350px;
      background: #fff;
      position: relative;
      padding: 10px;

      .chart-box {
        position: relative;
        margin-top: 62px;
      }

      .date {
        position: absolute;
        right: 10px;
        z-index: 1000;

        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
          width: 140px;
        }

        ::deep.el-input__inner {
          height: 30px !important;
        }

        ::deep.el-input__icon {
          line-height: 30px !important;
        }
      }
    }
  }

  .chart-right {
    width: 1040px;
    background: #fff;
    height: 100%;
    position: relative;
    padding: 10px;

    .line-chart {
      position: relative;
      top: 60px;
    }

    .date {
      position: absolute;
      right: 10px;
      z-index: 1000;

      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 140px;
      }

      ::deep.el-input__inner {
        height: 30px !important;
      }

      ::deep.el-input__icon {
        line-height: 30px !important;
      }
    }
  }
}
</style>
